﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Main.aspx.cs" Inherits="WF.Web.Main" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
   <meta content="text/html;charset=utf-8" />
    <title>jQuery UI Tabs - Simple manipulation</title>
    <link type="text/css" href="css/themes/base/jquery.ui.core.css" rel="stylesheet" />
    <link type="text/css" href="css/themes/base/jquery.ui.tabs.css" rel="stylesheet" />
    <link type="text/css" href="css/themes/base/jquery.ui.theme.css" rel="stylesheet" />
    <link type="text/css" href="css/demos.css" rel="stylesheet" />
    <script type="text/javascript" src="Scripts/jquery.js"></script>
    <script type="text/javascript" src="Scripts/ui/jquery.ui.core.js"></script>
    <script type="text/javascript" src="Scripts/ui/jquery.ui.widget.js"></script>
    <script type="text/javascript" src="Scripts/ui/jquery.ui.tabs.js"></script>
    <script type="text/javascript" src="Scripts/Common.js"></script>
    <style type="text/css">
        body
        {
            margin: 0;
            padding: 0;
        }
        #tabs
        {
        }
        #tabs li .ui-icon-close
        {
            float: left;
            margin: 0.4em 0.2em 0 0;
            cursor: pointer;
        }
    </style>
    <script type="text/javascript">

        //当前的tab计数器

        var tab_counter = 1;

        //最大打开Tab
        var MAX_tab_counter = 2;
        if (window.screen.width <= 800) {
            MAX_tab_counter = 5;
        } else if (window.screen.width <= 1024) {
            MAX_tab_counter = 6;
        }
        else if (window.screen.width <= 1280) {
            MAX_tab_counter = 9;
        }
        else if (window.screen.width <= 1440) {
            MAX_tab_counter = 10;
        }
        else {
            MAX_tab_counter = 12;
        }

        //要创建的tab页面的url
        var url = "";

        //使用JQuery 初始化tab
        $(function () {
            var $tabs = $('#tabs').tabs({
                tabTemplate: '<li><a href="#{href}">#{label}</a> <span class="ui-icon ui-icon-close">Remove Tab</span></li>',
                cache: true,
                add: function (event, ui) {
                    tab_counter++;
                    var tab_content = "<iframe id=\"mainBody" + tab_counter + "\" name=\"mainBody" + tab_counter + "\" frameborder=\"0\" scrolling=\"no\" width=\"100%\" src=\"" + url + "\" onload=\"SetWinHeight(this);\" > </iframe>";
                    //$(ui.panel).append('<p>' + tab_content + '</p>');
                    $(ui.panel).append(tab_content);
                    $tabs.tabs('select', '#' + ui.panel.id);
                    //$tabs.tabs('option', 'selected', tab_counter -1);
                }
            });

            $('#tabs span.ui-icon-close').live('click', function () {
                var index = $('li', $tabs).index($(this).parent());
                $tabs.tabs('remove', index);
            });
        });

        ////////////////////////////////////////////////////////
        // 函数名称：CreateNewTab
        // 功能说明：创建Tab页面
        // 参数说明：pageTitle  页面标题
        //           pageUrl    页面url
        ///////////////////////////////////////////////////////
        function CreateNewTab(pageTitle, pageUrl) {
            //var maxTabs = 8;
            var $tabs = $('#tabs');
            var k = -1;

            //遍历每一个Tab的标题

            $('#tabs ul li a').each(function (i) {
                if (this.innerText == pageTitle) { k = i; }
            });

            //rguo
            if (k != -1) {
                $("#tabs").tabs({
                    selected: k
                });
            }
            else {
                if ($('#tabs ul li a').size() >= MAX_tab_counter) {
                    alert("打开窗口的数量超过限定的值，请关闭一些窗口后再重新操作");
                } else {

                    //tab_counter++;
                    url = pageUrl;
                    $tabs.tabs('add', '#l' + tab_counter, pageTitle);
                    $tabs.tabs('select', tab_counter - 1);
                }
            }
            window.scrollTo(0, 0);
        }

        ////////////////////////////////////////////////////////
        // 函数名称：RemoveAllTab
        // 功能说明：关闭所有的页面
        ///////////////////////////////////////////////////////
        function RemoveAllTab() {
            if ($('#tabs ul li a').size() > 1) {
                if (confirm('确定要关闭所有的页面吗?')) {
                    var $tabs = $('#tabs');
                    for (i = tab_counter - 1; i > 0; i--) {
                        $tabs.tabs('remove', i);
                    }
                    tab_counter = 1;
                }
            }
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div class="demo">
        <div id="tabs" runat="server" enableviewstate="true">
            <ul id="tabsTitle" runat="server" enableviewstate="true">
                <li id="11"><a href="#tabs-1">首页</a></li>                        
            </ul>
            
            <div id="tabs-1">
                <iframe id="mainBody1" name="mainBody1" frameborder="0" scrolling="no" width="100%"
                    src="<%=mainFormName%>" onload="Javascript:SetWinHeight(this)"></iframe>
            </div>
        </div>
    </div>
    &nbsp;
    </form>
</body>
</html>
